<template>
    <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-container>
            <el-header>Header</el-header>

            <el-button type="primary" @click="addbefore" >添加</el-button>
            <el-main>

                <el-form :inline="true" :model="empSearchForm" class="demo-form-inline" style="line-height: 40px">
                    <el-form-item label="姓名">
                        <el-input v-model="empSearchForm.name" placeholder="员工姓名"></el-input>
                    </el-form-item>
                    <el-date-picker
                            v-model="empSearchForm.date"
                            type="daterange"
                            value-format="yyyy-MM-dd"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                    </el-date-picker>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                    </el-form-item>
                </el-form>
                <el-table :data="tableData" style="width: 100%">
                    <el-table-column prop="id" label="编号" width="180"></el-table-column>
                    <el-table-column prop="headimg" label="员工头像" width="180">
                        <template slot-scope="scope">
                            <img :src="scope.row.headimg" width="80"/>
                        </template>
                    </el-table-column>

                    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
                    <el-table-column prop="age" label="年龄"></el-table-column>
                    <el-table-column prop="salary" label="薪水"></el-table-column>
                    <el-table-column prop="entrydate" label="入职日期"></el-table-column>
                    <el-table-column prop="dept.name" label="部门名称"></el-table-column>
                    <el-table-column label="操作"><!--修改数据的弹框-->
                        <template slot-scope="scope">
                            <el-button type="success" @click="editEmp(scope.row)">修改</el-button>
                            <el-button type="danger" @click="del(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[5, 10, 15, 20]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>


                <!--修改-->
                <el-dialog
                        title="修改"
                        :visible.sync="dialogVisible"
                        width="30%"
                >
                    <el-upload
                            class="avatar-uploader"
                            action="http://localhost:8080/upload/upload03"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <!--绑定表单数据-->
                    <el-form  label-width="80px" :model="editForm" >
                        <el-form-item label="员工姓名">
                            <el-input v-model="editForm.name" ></el-input>
                        </el-form-item>
                        <el-form-item label="年龄">
                            <el-input v-model="editForm.age"></el-input>
                        </el-form-item>
                        <el-form-item label="薪水">
                            <el-input v-model="editForm.salary" ></el-input>
                        </el-form-item>
                        <el-form-item label="入职日期">
                            <el-date-picker
                                    v-model="editForm.entrydate"
                                    type="date"
                                    style="width: 100%"
                                    placeholder="选择日期"
                                    value-format="yyyy-MM-dd">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item>
                            <el-select v-model="editForm.deptId"  style="width: 100%">
                                <el-option
                                        v-for="item in depts"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                            <el-button @click="dialogVisible = false">取 消</el-button>
                            <el-button type="primary" @click="confirmUpdate">确 定修改</el-button>
                            </span>
                </el-dialog>




                <!--添加数据-->
                <el-dialog
                        title="提示"
                        :visible.sync="addDialogVisible"
                        width="30%">
                    <el-upload
                            prop="headimg"
                            class="avatar-uploader"
                            action="/upload/upload03"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>

                    <!--绑定表单数据-->
                    <el-form  label-width="80px" :model="adds" ref="addFormRef">
                        <el-form-item label="员工姓名">
                            <el-input v-model="adds.name" ></el-input>
                        </el-form-item>
                        <el-form-item label="年龄">
                            <el-input v-model="adds.age" ></el-input>
                        </el-form-item>
                        <el-form-item label="薪水">
                            <el-input v-model="adds.salary"></el-input>
                        </el-form-item>

                        <el-form-item label="入职日期">
                            <el-date-picker
                                    v-model="adds.entrydate"
                                    type="date"
                                    style="width: 100%"
                                    placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>

                        <el-form-item label="部门id">
                            <el-input v-model="adds.deptId" ></el-input>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                            <el-button @click="addDialogVisible = false">取 消</el-button>
                            <el-button type="primary" @click="add">确 定</el-button>
                            </span>
                </el-dialog>
            </el-main>
            <el-footer>Footer</el-footer>
        </el-container>
    </el-container>
</template>

<script>
    export default {
        name: "Student",
        data() {
            return {
                tableData: [],
                dialogVisible: false,
                addDialogVisible: false,
                editForm: {},
                depts: [],
                adds: {},
                imageUrl: "",
                currentPage: 1,
                total: 1,
                pageSize: 5,
                //表单查询
                empSearchForm: {},
            }
        },
        //页面加载时执行的方法
        created() {
            this.initTable()
        },
        //定义方法的地方
        methods: {
            // initTable() {
                //使用Axios进行异步调用--需要把Axios挂载到当前Vue对象上--在main.js中来挂载
                // this.$http.get("http://localhost:8001/student/list").then(resp=>{
                //     console.log(resp)
                //     if(resp.data.code===2000){
                //         this.tableData=resp.data.data;
                //     }
                // }),
                dialogClose()
                {
                    this.imageUrl = "";
                    this.$refs.addFormRef.resetFields();
                },
                handleSizeChange(val)
                {
                    this.pageSize = val
                    this.initTable();
                },
                handleCurrentChange(val)
                {
                    this.currentPage = val
                    this.initTable();
                },
                handleAvatarSuccess(res, file)
                {
                    console.log(res);
                    this.adds.headimg = res.data;
                    this.imageUrl = URL.createObjectURL(file.raw);
                },
                beforeAvatarUpload(file)
                {
                    const isJPG = file.type === 'image/jpeg';
                    const isLt10M = file.size / 1024 / 1024 < 10;
                    if (!isJPG) {
                        this.$message.error('上传头像图片只能是 JPG 格式!');
                    }
                    if (!isLt10M) {
                        this.$message.error('上传头像图片大小不能超过 2MB!');
                    }
                    return isJPG && isLt10M;
                },
                //添加按钮点击触发的事件
                addbefore()
                {
                    this.addDialogVisible = true;
                    this.imageUrl = ''
                },

                //确认添加数据
                add()
                {
                    this.$http.post("http://localhost:8080/emp/add",this.adds).then(result => {
                        // console.log("~~~~~~~~~~~~~"+this.adds);
                        if (result.data.code === 200) {
                            // this.imageUrl="";
                            this.$message.success("成功添加数据");
                            this.addDialogVisible = false;
                            this.initTable();
                        }
                    })
                },

                //  确认修改
                confirmUpdate()
                {
                    this.imageUrl = "";
                    this.$http.post("http://localhost:8080/emp/update",this.editForm).then(result => {
                        if (result.data.code === 200) {
                            this.$message.success("成功修改员工信息");
                            this.dialogVisible = false;
                            this.initTable()
                        }
                    })
                },
                editEmp(row)
                {
                    this.dialogVisible = true;
                    this.editForm = row;

                    this.imageUrl = row.headimg;
                    this.$http.get("http://localhost:8080/dept/list").then(result => {
                        console.log(result);
                        this.depts = result.data.data;
                    })
                },
                //当
                onSubmit()
                {
                    this.currentPage = 1;
                    this.initTable();
                },
                //回显数据
                initTable()
                {
                    this.$http.post("http://localhost:8080/emp/list?pageSize=" + this.pageSize + "&currentPage=" + this.currentPage, this.empSearchForm).then(result => {
                        if (result.data.code === 200) {
                            this.tableData = result.data.data.list
                            this.total = result.data.data.total
                        }else if(result.data.code===4001){
                            this.$message.error("未登录");
                            this.$router.push("/")
                        }
                    })
                },

                //删除数据
                del(row)
                {
                    this.$http.get("http://localhost:8080/emp/delete?id=" + row.id).then(result => {
                        console.log(result)
                        if (result.data.code === 200) {
                            this.$message.success("删除成功");
                            this.initTable();
                        }
                    })
                }
        }
    }
</script>

<style scoped>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
    .el-header, .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
        line-height: 200px;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        line-height: 160px;
    }

    body > .el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }
    .el-main{
        line-height: 40px;
    }
</style>